<template>
  <div id="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack" class="back">
        <van-search
            style="height:40px"
            v-model="searchValue"
            shape="round"
            background="#f29600"
            @input="handleClear"
            placeholder="请输入关键词">
        </van-search>
        <div class="nav-btn">
          <span @click.prevent="handleSearch">搜索</span>
        </div>
      </div>
    </van-sticky>
    <div class="content" v-if="searchShow">
      <div class="history">
        <div class="title">
          <div class="title-name">历史搜索</div>
          <div class="del" @click="handleDelete"><img :src="del" alt="" class="delIcon" width="13px" height="18px">
          </div>
        </div>
        <div class="tags">
          <div v-for="(item,index) in tagList" :key="index" class="tag" @click="handleSelect(item)">
            <!-- <el-tag size="medium"  type="info">{{item.name}}</el-tag> -->
            <span style="overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;width: 80px;text-align: center">{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--    v-if="!searchShow" 通过这个参数控制搜索内容显隐-->
    <div class="body" v-if="!searchShow">
      <div v-if="list.length==0" style="text-align: center">暂无数据</div>
      <shop-list-item :articles="list"></shop-list-item>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import {antiShake} from '@/utils/antie.js'
import ShopListItem from "../components/shopListItem";
import {searchRecords, deleteSearchRecord, searchForGoods} from "../../../api/shopping";

export default {
  name: "index",
  components: {ShopListItem},
  data() {
    return {
      searchValue: '',
      tagList: [],
      searchShow: true,
      back: require("@/assets/search/back.png"),
      del: require("@/assets/search/clear.png"),
      list: [],
      current: 1, // 获取下一页数据current
      size: 100,
    }
  },
  mounted() {
    this.searchRecords()
  },
  methods: {
    searchRecords() {
      searchRecords().then(res => {
        console.log('-----历史记录-----', res)
        this.tagList = res.data.records
      })
    },
    handleBack() {//返回
      this.$router.go(-1)
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    handleSelect(val) {
      this.searchValue = val.content ? val.content : ''
    },
    handleClear() {//清空事件
      if (!this.searchValue) {
        this.searchShow = true
      }
    },
    handleDelete() {//删除搜索记录
      deleteSearchRecord().then((res) => {
        console.log('删除成功，并重新查询记录')
        this.searchRecords()
        this.$toast.success('删除记录成功')
      })
    },
    handleSearch: antiShake(function () {//搜索
      if (this.searchValue) {
        this.searchShow = false
        this.searchList()
      } else {
        Toast('请输入搜索内容')
      }
    }),
    searchList() {
      let data = {
        search: this.searchValue,
        size: this.size,
        current: this.current
      }
      searchForGoods(data).then(res => {
        console.log('historyRecords', res.data.records)
        this.list = res.data.records
        this.searchRecords()
      })
    }
  }
}
</script>

<style scoped lang="less">
#main {
  width: 100%;
  height: 100vh;

  .nav {
    display: flex;
    // height: 40px;
    background: #f29600;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 4px 16px 7px 16px;

    .back {
      cursor: pointer;
    }

    .van-search {
      padding: 0;
      background-color: #fff;
      width: 283px;
      height: 33px;
      margin: 0 6px 0 15px;

    }

    @media screen and (max-width: 389px) {
      .van-search {
        padding: 0;
        background-color: #fff;
        width: 260px;
        height: 33px;
        margin: 0 5px 0 15px;

      }

    }
    @media screen and (max-width: 374px) {
      .van-search {
        padding: 0;
        background-color: #fff;
        width: 220px;
        height: 33px;
        margin: 0 3px 0 10px;

      }

    }

    .nav-btn {
      height: 22px;
      font-size: 15px;
      padding: 3px 7px;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      cursor: pointer;
    }
  }

  .content {
    padding: 0 15px;

    .history {
      padding: 10px 5px;
      color: #c2c2c2;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-name {
          font-size: 16px;
        }

        .del {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .tags {
        display: flex;
        padding: 10px 0;
        flex-wrap: wrap;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24.62px;
        color: rgba(56, 56, 56, 1);

        .tag {
          padding: 5px 8px;
          height: 28px;
          opacity: 1;
          border-radius: 8px;
          background: rgba(229, 229, 229, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px;
          line-height: 24.62px;
          color: rgba(56, 56, 56, 1);
          color: rgba(56, 56, 56, 1);
          max-height: 100px;

        }
      }
    }
  }

  .body {
    padding: 15px;
  }
}
</style>
